<template>
  <div>
    <el-dialog :visible.sync="checkDialog" width="80%" title="总明细" top="50px" center>
      <el-table :data="checkData"
                max-height="600px"
                :headerCellStyle="{
                    'textAlign': 'center',
                    'fontWeight': 400,
                    'background': '#66b1ff',
                    'color': 'white',
                }" :cellStyle="{
                    'textAlign': 'center',
                    'fontSize': '12px'
                }">
        <el-table-column prop="userName" label="申请人"></el-table-column>
        <el-table-column prop="createTime" label="申请日期" width="95px"></el-table-column>
        <el-table-column prop="financeName" label="费用类型"></el-table-column>
        <el-table-column prop="optioner" label="承担主体"></el-table-column>
        <el-table-column prop="matter" label="费用说明" width="230px"></el-table-column>
        <el-table-column prop="money" label="花费"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column label="凭证" width="200px">
          <template slot-scope="scope">
            <el-image v-for="(item,index) in scope.row.proof" style="width: 50px; height: 50px"
                      :src="host+item" :key="index" :preview-src-list="scope.row.proof.map((img) => host + img)">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="财务付款凭证">
          <template slot-scope="scope" v-if="scope.row.paidUrl">
            <el-image style="width: 50px; height: 50px" v-for="(item,index) in scope.row.paidUrl.split(',')"
                      :src="host+item" :key="index" :preview-src-list="[host+item]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="审核人"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.status==3" style="color:seagreen">已付款</div>
            <div v-if="scope.row.status==2" style="color:#f5b330">待付款</div>
            <div v-if="scope.row.status==0" style="color:#f5b330">待主管审核</div>
            <div v-if="scope.row.status==1" style="color:orangered">已驳回</div>
            <div v-if="scope.row.status==4" style="color:#66b1ff">待财务审核</div>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer">
       <p style="font-size: 20px"> 总计：{{ totalMoney }}</p>
        <p style="font-size: 20px">去除货拉拉后总计：{{ totalMoneyExcludeHLL }}</p>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "checkDetail",
  data() {
    return {
      checkDialog: false,
      checkData: [],
      host: this.$imgHost,
      totalMoney: "",
      totalMoneyExcludeHLL: "",
    }
  },
  methods: {
    handleOpen(val) {
      this.checkDialog = true
      this.$api.storeLedgerGetStoreReimburseDetail({orderId: val.orderId}).then(res => {
        this.checkData = res
        this.totalMoney = res.reduce((sum, item) => sum + Number(item.money || 0), 0)
        this.totalMoneyExcludeHLL = res
            .filter(item => item.levelName !== '货拉拉')
            .reduce((sum, item) => sum + Number(item.money || 0), 0)
      })
    }
  }
}
</script>

<style scoped>

</style>